<template>
  <!-- 编辑弹出层 -->
  <div>
    <el-dialog
      :title="Modify"
      :visible.sync="isDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="true"
      :before-close="handleDialogClose"
      width="40%"
      destroy-on-close
      center
    >
      <div>
        <el-form
          v-if="ShuDown"
          :rules="rules"
          ref="ruleForm"
          :model="ruleForm"
          class="demo-ruleForm"
          label-width="120px"
        >
          <el-form-item label="所属页面" class="item" prop="edition">
            <el-select
              v-model="ruleForm.edition"
              placeholder="请选择所属页面"
              class="Popup_inputwidth"
            >
              <el-option
                v-for="item in tablePage"
                :key="item.id"
                :label="item.dataSourceType"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="提示目标" class="item" prop="dataSourceName">
            <el-select
              v-model="ruleForm.dataSourceName"
              placeholder="请选择提示目标"
              class="Popup_inputwidth"
            >
              <el-option
                v-for="item in tableData"
                :key="item.id"
                :label="item.dataSourceType"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="提示信息" class="item" prop="dataSourceUrl">
            <el-input
              v-model="ruleForm.dataSourceUrl"
              placeholder="请输入提示信息"
              size="small"
              class="Popup_inputwidth"
              clearable
            />
          </el-form-item>

          <el-form-item label="提示id" class="item" prop="dbName">
            <el-input
              v-model="ruleForm.dbName"
              placeholder="请输入提示id "
              size="small"
              class="Popup_inputwidth"
              clearable
              :disabled="isEditTable"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetField('ruleForm')" style="margin-right: 50px"
          >取 消</el-button
        >
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import {
//   IndexNew,
//   SourceUpdate,
// } from "@/assets/js/api";
export default {
  props: {
    Modify: {
      type: String,
      default: "",
    },
    isDialog: {
      type: Boolean,
      default: false,
    },
    // ruleForm: {
    //   type: Object,
    //   default: () => {},
    // },
    isEditTable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      ruleForm: {
        edition: "",
        dataSourceName: "",
        dataSourceUrl: "",
        dbName: "",
      },
      // 所属页面
      tablePage: [
        {
          id: 1,
          dataSourceType: "交易看板",
        },
        {
          id: 2,
          dataSourceType: "核心看板",
        },
        {
          id: 3,
          dataSourceType: "行为看板",
        },
        {
          id: 4,
          dataSourceType: "增长看板",
        },
      ],
      //表格数据
      tableData: [
        {
          id: 1,
          dataSourceType: "下单金额",
        },
        {
          id: 2,
          dataSourceType: "下单用户数",
        },
        {
          id: 3,
          dataSourceType: "下单订单量",
        },
        {
          id: 4,
          dataSourceType: "付费金额",
        },
        {
          id: 5,
          dataSourceType: "付费用户数",
        },
        {
          id: 6,
          dataSourceType: "付费订单量",
        },
      ],
      //   加密限制
      add: 0,
      // 校验规则
      rules: {
        edition: [
          { required: true, message: "请输入所属页面", trigger: "change" },
        ],
        dataSourceName: [
          { required: true, message: "请输入提示目标", trigger: "change" },
        ],
        dataSourceUrl: [
          { required: true, message: "请输入提示信息", trigger: "blur" },
          {
            required: true,
            message: "输入不能为空",
            pattern: "[^ \x22]+",
            trigger: "blur",
          },
        ],
        dbName: [
          { required: true, message: "请输入提示id ", trigger: "blur" },
          {
            required: true,
            message: "输入不能为空",
            pattern: "[^ \x22]+",
            trigger: "blur",
          },
        ],
        // dataSourceUserName: [
        //   { required: true, message: "请输入付费金额提示", trigger: "blur" },
        //   {
        //     required: true,
        //     message: "输入不能为空",
        //     pattern: "[^ \x22]+",
        //     trigger: "blur",
        //   },
        // ],
        // dataSourcePwd: [
        //   { required: true, message: "请输入密码", trigger: "blur" },
        //   {
        //     required: true,
        //     message: "输入不能为空",
        //     pattern: "[^ \x22]+",
        //     trigger: "blur",
        //   },
        // ],
        // dataSourceType: [
        //   { required: true, message: "请输入付费用户数提示", trigger: "blur" },
        //   {
        //     required: true,
        //     message: "输入不能为空",
        //     pattern: "[^ \x22]+",
        //     trigger: "blur",
        //   },
        // ],
        // dataSourceDesc: [
        //   { required: true, message: "请输入付费订单量提示", trigger: "blur" },
        //   {
        //     required: true,
        //     message: "输入不能为空",
        //     pattern: "[^ \x22]+",
        //     trigger: "blur",
        //   },
        // ],
      },
    };
  },
  methods: {
    // 点击x关闭
    handleDialogClose() {
      this.$emit("ResetData", true);
      this.$emit("isDialog", false);
    },
    // v-if关闭
    ShuDown() {
      this.$emit("dialogVisible", false);
    },
    // 添加下拉选中
    changeitem(value) {
      this.ruleForm.dataSourceType = value; //下拉查询选中赋值
    },
    // 校验重置
    resetField(formName) {
      this.$refs[formName].resetFields();
      this.$emit("ResetData", true);
      this.$emit("isDialog", false);
    },
    // 添加确定提交事件
    submitForm(formName) {
      // this.ruleForm.dataSourcePwd = this.ruleForm.dataSourcePwd.trim();
      // this.ruleForm.dataSourceUserName =
      //   this.ruleForm.dataSourceUserName.trim();
      this.ruleForm.edition = this.ruleForm.edition.trim();
      this.ruleForm.dataSourceName = this.ruleForm.dataSourceName.trim();
      this.ruleForm.dataSourceUrl = this.ruleForm.dataSourceUrl.trim();
      this.ruleForm.dbName = this.ruleForm.dbName.trim();
      // this.ruleForm.dataSourceDesc = this.ruleForm.dataSourceDesc.trim();
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.isEditTable) {
            // let res = await SourceUpdate(this.ruleForm);
            // if (res.code == 0) {
            //   this.$emit("inquire",true)
            //   this.$emit("isDialog",false)
            //   this.$emit("ResetData",true)
            // } else {
            //   this.$message({
            //     showClose: true,
            //     message: res.msg,
            //     type: "error",
            //   });
            // }
          } else {
            // this.add += 1;
            // if (this.add == 1) {
            //   let res = await IndexNew(this.ruleForm);
            //   if (res.code == 0) {
            //     this.$emit("inquire",true)
            //     this.$emit("isDialog",false)
            //     this.$emit("ResetData",true)
            //     this.add = 0;
            //   } else {
            //     this.$message({
            //       showClose: true,
            //       message: res.msg,
            //       type: "error",
            //     });
            //     this.add = 0;
            //   }
            // }
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.Popup_inputwidth {
  width: 90%;
}
</style>